<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="user.username"/>
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input v-model="user.password"/>
      </el-form-item>
      <el-form-item label="用户昵称">
        <el-input v-model="user.nickname"/>
      </el-form-item>
      <el-form-item label="用户邮箱">
        <el-input v-model="user.email"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import user from "@/api/user";

export default {
  data() {
    return {
      user: {},
      saveBtnDisabled: false // 保存按钮是否禁用
    }
  },
  watch: { // 监听
    $route(to, from) { // 当路由发生变化时，该方法就会执行
      // 没有获取到id，则清空表单
      this.init()
    }
  },
  created() {
    this.init()
  },
  methods: {
    /* 根据id查询*/
    getInfo(id) {
      user.getUserById(id).then(response => {
        console.log(response)
        this.user = response.data.user
      })
    },
    init() { // 封装初始化信息
      // 判断路径是否有id值
      if (this.$route.params && this.$route.params.id) {
        // 从路径中获取id值
        const id = this.$route.params.id

        // 调用根据id查询的方法
        this.getInfo(id)
      } else {
        // 没有获取到id，则清空表单
        this.user = {}
      }
    },
    saveOrUpdate() {
      this.saveBtnDisabled = true // 点击保存时，触发禁用保存按钮
      // 判断是添加还是修改操作 :根据teacher中是否存在id
      if (this.user.id) {
        // 为true，则有id，执行修改操作
        this.updateUser()
      } else {
        // 执行添加方法
        this.saveUser()
      }
    },
    // 修改讲师的方法
    updateUser() {
      user.updateUserInfo(this.user).then(response => {
        this.$message.success('修改成功')
        this.$router.push('/user/info')
      })
    },
    // 保存讲师的方法
    saveUser() {
      user.addUser(this.user).then(response => {
        this.$message.success('保存成功')
        this.$router.push('/user/info')
      }).catch(() => {
        this.$message.success('保存失败')
      }).finally(response => {
        this.saveBtnDisabled = false
      })
    }
  }
}
</script>

<style scoped>

</style>
